<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>自定义公式</span>
        </div>
        <div>
          <el-card class="box-card1">
            <div slot="header" class="clearfix">
              <span>实发工资=</span>
            </div>
            <div>
              <span
                style="
                  padding: 10px 10px;
                  border: 1px solid black;
                  border-radius: 5px;
                "
                >当月应发工资</span
              >-
              <span
                style="
                  padding: 10px 10px;
                  border: 1px solid black;
                  border-radius: 5px;
                "
                >税后扣款工资</span
              >+
              <span
                style="
                  padding: 10px 10px;
                  border: 1px solid black;
                  border-radius: 5px;
                "
                >实发年终奖</span
              >/
              <span
                style="
                  padding: 10px 10px;
                  border: 1px solid black;
                  border-radius: 5px;
                "
                >实际出勤天数</span
              >
            </div>
          </el-card>
        </div>
        <div style="margin-top: 10px">
          <el-button>试算</el-button>
          <el-button style="margin-left: 20px">重置</el-button>
          <el-select
            v-model="value"
            placeholder="请选择"
            style="width: 10%; margin-left: 20px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span style="margin-left: 20px">保留</span>
          <el-input-number
            v-model="num"
            controls-position="right"
            @change="handleChange"
            :min="0"
            :max="10"
            style="margin-left: 20px; width: 10%"
          ></el-input-number>
          <span style="margin-left: 20px">位小数</span>
          <span style="margin-left: 220px">常用符号:</span>
          <el-button style="margin-left: 20px">+</el-button>
          <el-button>-</el-button>
          <el-button>*</el-button>
          <el-button>/</el-button>
          <el-button>()</el-button>
        </div>
        <div style="margin-top: 30px; display: flex">
          <div>
            <div style="color: #657180">薪资项目</div>
            <div
              style="
                width: 570px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
            >
              <div style="height: 50px; border-bottom: 1px solid black">
                <el-input
                  placeholder="请输入内容"
                  v-model="input3"
                  class="input-with-select"
                  style="margin-top: 5px; width: 550px; margin-left: 10px"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div style="display: flex">
                <div
                  style="
                    background-color: rgba(249, 249, 249, 1);
                    height: 259px;
                    width: 35%;
                    text-align: center;
                    line-height: 30px;
                  "
                >
                  <p v-for="item in data1" :key="item.id" class="p2">
                    {{ item.name }}
                  </p>
                </div>
                <div style="width: 65%">
                  <div class="" style="display: flex; flex-wrap: wrap">
                    <div
                      class="item"
                      v-for="item in datas"
                      :key="item.id"
                      :class="item.checked === true ? 'select' : ''"
                      @click="checkeds(item.id)"
                    >
                      <div class="shift" style="width: 50px">
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-left: 20px">
            <div style="color: #657180">函数</div>
            <div
              style="
                width: 200px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
            >
              <div style="height: 50px; border-bottom: 1px solid black">
                <el-input
                  placeholder="请输入内容"
                  v-model="input3"
                  class="input-with-select"
                  style="margin-top: 5px; width: 180px; margin-left: 10px"
                >
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
              <div style="text-align: center; line-height: 28px; width: 100%">
                <p
                  class="a1"
                  v-for="item in data2"
                  :key="item.id"
                  @click="tab(item.id)"
                >
                  {{ item.name }}
                </p>
              </div>
            </div>
          </div>
          <div style="margin-left: 20px">
            <div style="color: #657180">帮助</div>
            <div
              style="
                width: 300px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
              v-if="values1 === 6"
            >
              <div
                style="
                  height: 50px;
                  border-bottom: 1px solid black;
                  line-height: 50px;
                "
              >
                SUM
              </div>
              <div style="line-height: 25px">
                <div>求和</div>
                <div>计算所有数值的和</div>
                <div style="margin-top: 10px">用法</div>
                <div>SUM(number1,number2,...)</div>
                <div style="margin-top: 10px">示例</div>
                <div>SUM(1,2,3,4,5,6)，</div>
                <div>结果是 (1+2+3+4+5+6) = 20</div>
                <div>SUM( 工龄工资, 职称工资, 全勤奖 )，</div>
                <div>结果是 工龄工资，职称工资, 全勤奖之和</div>
              </div>
            </div>
            <div
              style="
                width: 300px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
              v-if="values1 === 1"
            >
              <div
                style="
                  height: 50px;
                  border-bottom: 1px solid black;
                  line-height: 50px;
                "
              >
                MAX
              </div>
              <div style="line-height: 25px">
                <div>求最大值</div>
                <div>计算所有数值里面的最大值</div>
                <div style="margin-top: 10px">用法</div>
                <div>MAX(number1,number2,...)</div>
                <div style="margin-top: 10px">示例</div>
                <div>MAX(1,2,3,4,5,6)，</div>
                <div>结果是 6</div>
                <div>MAX( 工龄工资, 职称工资, 全勤奖 )，</div>
                <div>结果是 他们三个的最大值</div>
              </div>
            </div>
            <div
              style="
                width: 300px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
              v-if="values1 === 2"
            >
              <div
                style="
                  height: 50px;
                  border-bottom: 1px solid black;
                  line-height: 50px;
                "
              >
                MIN
              </div>
              <div style="line-height: 25px">
                <div>求最小值</div>
                <div>计算所有数值里面的最小值</div>
                <div style="margin-top: 10px">用法</div>
                <div>MIN(number1,number2,...)</div>
                <div style="margin-top: 10px">示例</div>
                <div>MIN(1,2,3,4,5,6)，</div>
                <div>结果是 1</div>
                <div>MIN( 工龄工资, 职称工资, 全勤奖 )，</div>
                <div>结果是 他们三个的最小值</div>
              </div>
            </div>
            <div
              style="
                width: 300px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
              v-if="values1 === 3"
            >
              <div
                style="
                  height: 50px;
                  border-bottom: 1px solid black;
                  line-height: 50px;
                "
              >
                COUNT
              </div>
              <div style="line-height: 25px">
                <div>求数字类型的值</div>
                <div>计算所有数值的值</div>
                <div style="margin-top: 10px">用法</div>
                <div>COUNT(value1,value2, ...)</div>
                <div style="margin-top: 10px">示例</div>
                <div>COUNT(A1:A7) 等于 3</div>
                <div>结果是 3</div>
                <div>COUNT(A1:A7) 等于 3，</div>
                <div>结果是 计算出A1到A7中数字的个数</div>
              </div>
            </div>
            <div
              style="
                width: 300px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
              v-if="values1 === 4"
            >
              <div
                style="
                  height: 50px;
                  border-bottom: 1px solid black;
                  line-height: 50px;
                "
              >
                AVERAGE
              </div>
              <div style="line-height: 25px">
                <div>求平均值</div>
                <div>计算数值的平均值</div>
                <div style="margin-top: 10px">用法</div>
                <div>AVERAGE(value1,value2, ...)</div>
                <div style="margin-top: 10px">示例</div>
                <div>AVERAGE(A1:A7) 等于 3</div>
                <div>结果是 3</div>
                <div>AVERAGE(A1:A7) 等于 3，</div>
                <div>结果是 计算出A1到A7中数字的平均值</div>
              </div>
            </div>
            <div
              style="
                width: 300px;
                height: 310px;
                border: 1px solid black;
                margin-top: 10px;
              "
              v-if="values1 === 5"
            >
              <div
                style="
                  height: 50px;
                  border-bottom: 1px solid black;
                  line-height: 50px;
                "
              >
                ABS
              </div>
              <div style="line-height: 25px">
                <div>求绝对值</div>
                <div>计算数值的绝对值</div>
                <div style="margin-top: 10px">用法</div>
                <div>ABS(value1,value2, ...)</div>
                <div style="margin-top: 10px">示例</div>
                <div>ABS(-3)</div>
                <div>结果是 3</div>
                <div>ABS(5,-6,8,-9)</div>
                <div>结果是 计算出的是5,6,8,9</div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "四舍五入",
        },
        {
          value: "选项2",
          label: "原始数据",
        },
      ],
      value: "选项1",
      num: 1,
      input3: "",
      data1: [
        {
          id: 1,
          name: "薪资项目",
        },
        {
          id: 2,
          name: "考勤项目",
        },
        {
          id: 3,
          name: "社保公积金项目",
        },
        {
          id: 4,
          name: "累计应纳税所得额",
        },
        {
          id: 5,
          name: "累计专项附加及其他扣除",
        },
      ],
      datas: [
        {
          id: 1,
          name: "基本工资",
          checked: false,
        },
        {
          id: 2,
          name: "岗位工资",
          checked: false,
        },
        {
          id: 3,
          name: "职务工资",
          checked: false,
        },
        {
          id: 4,
          name: "交通补贴",
          checked: false,
        },
        {
          id: 5,
          name: "住房补贴",
          checked: false,
        },
        {
          id: 6,
          name: "餐补",
          checked: false,
        },
        {
          id: 7,
          name: "夜班津贴",
          checked: false,
        },
        {
          id: 8,
          name: "通讯补贴",
          checked: false,
        },
        {
          id: 9,
          name: "节假日补贴",
          checked: false,
        },
        {
          id: 10,
          name: "员工慰问金",
          checked: false,
        },
        {
          id: 11,
          name: "冬季取暖津贴",
          checked: false,
        },
        {
          id: 12,
          name: "差旅补贴",
          checked: false,
        },
        {
          id: 13,
          name: "绩效工资",
          checked: false,
        },
        {
          id: 14,
          name: "季度奖",
          checked: false,
        },
        {
          id: 15,
          name: "全勤奖",
          checked: false,
        },
        {
          id: 16,
          name: "销售提成",
          checked: false,
        },
        {
          id: 17,
          name: "工龄工资",
          checked: false,
        },
        {
          id: 18,
          name: "司龄工资",
          checked: false,
        },
        {
          id: 19,
          name: "职称工资",
          checked: false,
        },
        {
          id: 20,
          name: "技能工资",
          checked: false,
        },
      ],
      data2: [
        {
          id: 1,
          name: "取最大值MAX",
        },
        {
          id: 2,
          name: "取最小值MIN",
        },
        {
          id: 3,
          name: "计数COUNT",
        },
        {
          id: 4,
          name: "求平均数AVERAGE",
        },
        {
          id: 5,
          name: "求绝对值ABS",
        },
        {
          id: 6,
          name: "求和SUM",
        },
        {
          id: 7,
          name: "四舍五入ROUND",
        },
        {
          id: 8,
          name: "向上舍入ROUNDUP",
        },
        {
          id: 9,
          name: "向下舍入ROUNDDOWN",
        },
      ],
      values1: 1,
    };
  },
  methods: {
    checkeds(id) {
      let idx = this.datas.findIndex((item) => item.id === id);
      this.datas[idx].checked = !this.datas[idx].checked;
      if (this.datas[idx].checked) {
        let index1 = this.data100.findIndex((item) => item.id === id);
        if (index1 === -1) {
          this.data100.push(this.datas[idx]);
        }
      } else {
        let index = this.data100.findIndex((item) => item.id === id);
        this.data100.splice(index, 1);
      }
    },
    tab(id) {
      this.values1 = id;
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 80%;
}
.box-card1 {
  width: 90%;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.a1:hover {
  background-color: blueviolet;
  color: white;
}
.p2:hover {
  color: blueviolet;
}
.item {
  /* border: 1px #aaaaaa solid; */
  padding: 2px 5px 2px 2px;
  border-radius: 5px;
  margin: 0.8vh 0.8vw;
  font-size: 12px;
  box-sizing: border-box;
  box-shadow: none;
  color: #657180;
  border-width: 1px;
  border-style: solid;
  font-family: "微软雅黑", sans-serif;
  text-align: center;
}
.item:hover {
  border: 1px solid #00aaff;
  color: #00aaff;
}
.select {
  text-align: center;
  position: relative;
  /* text-align: left; */
  color: #00aaff;
  background-color: #fff;
  box-shadow: 0px 2px 7px 0px rgba(85, 110, 97, 0.35);
  border-radius: 5px;
  border: 1px solid #00aaff;
}

.select:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border: 10px solid #00aaff;
  border-top-color: transparent;
  border-left-color: transparent;
}

.select:after {
  content: "";
  width: 4px;
  height: 6px;
  position: absolute;
  right: 4px;
  bottom: 3px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
  border-left-color: transparent;
  transform: rotate(45deg);
}
</style>